<!--
 @Description 新闻列表右上角查看更多
 @author gaohailan
 @date 2022/11/27
-->

<template>
  <section
    v-if="list.length>0"
    class="news-list-style-three-comp"
    :style="{ 'margin-top': top}"
  >
    <div
      :style="{
        marginLeft: spacing,
        marginRight: spacing,
        borderTopLeftRadius:radiusSize,
        borderTopRightRadius:radiusSize,
        'background-image': `url(${imgBg})`,
        'background-repeat': 'no-repeat',
        'background-size': '100% 100%',
        'background-position': 'top center',
      }"
    >
      <cell-title
        v-if="isShowModuleName"
        :title="moduleName"
        :option="option"
        :hide-desc="option.isMore ==='2'"
        :style="{
          'background-color': option.backgroundColor,
          'border-radius':
            px2rem(option.radiusSize) + ' ' + px2rem(option.radiusSize) + ' 0 0'
        }"
      />
      <ul
        :style="{
          'background-color': bgcolor,
          borderBottomLeftRadius: bottomLeftRadius,
          borderBottomRightRadius: bottomRightRadius,
          borderTopLeftRadius:topLeftRadius,
          borderTopRightRadius:topRightRadius
        }"
      >
        <li
          v-for="(item, index) in list"
          :key="index"
          @click="goNewsDetail(item)"
        >
          <template v-if="option.resource ==='zl'">
            <newsListStyleEight :item="item" :option="option" />
          </template>
          <template v-else>
            <newsListStyleEight v-if="item.showType=='ZSXS_CWZ'" :item="item" :option="option" />
            <newsListStyleTwo v-else-if="item.showType=='ZSXS_YWYSYS'" :item="item" :option="option" />
            <newsListStyleThree v-else-if="item.showType=='ZSXS_YWZTYS'" :item="item" :option="option" />
            <newsListStyleFour v-else-if="item.showType=='ZSXS_YWZSYS'" :item="item" :option="option" />
            <newsListStyleFive v-else-if="item.showType=='ZSXS_TWHPDTYS'" :item="item" :option="option" />
            <newsListStyleSix v-else-if="item.showType=='ZSXS_TWHPBTYS'" :item="item" :option="option" />
            <newsListStyleSeven
              v-else-if="item.showType=='ZSXS_TWHPDSYS'"
              :item="item"
              :position="index"
              :option="option"
            />
            <newsListStyleOne v-else :item="item" :option="option" />
          </template>

        </li>
      </ul>

    </div>

  </section>
</template>
<script>
import mixins from '../mixins'
import newsListStyleOne from './newsListStyleOne'
import newsListStyleTwo from './newsListStyleTwo'
import newsListStyleThree from './newsListStyleThree'
import newsListStyleFour from './newsListStyleFour'
import newsListStyleFive from './newsListStyleFive'
import newsListStyleSix from './newsListStyleSix'
import newsListStyleSeven from './newsListStyleSeven'
import newsListStyleEight from './newsListStyleEight'
import CellTitle from '@/components/CustomPage/apps/widget/characters/cellTitle'

export default {
  name: 'NewsListStyleThreeComp',
  components: {
    newsListStyleOne,
    newsListStyleTwo,
    newsListStyleThree,
    newsListStyleFour,
    newsListStyleFive,
    newsListStyleSix,
    newsListStyleSeven,
    newsListStyleEight,
    CellTitle
  },
  mixins: [mixins],
  props: {
    option: {
      type: Object,
      default() {
        return {}
      }
    },
    isInitData: {
      type: Boolean,
      default: false
    }
  },
  inject: ['footerHeight'],
  data() {
    return {
      list: [],
      page: 1,
      id: '',
      view: '/API-DOCUMENT/document/file/download?id=',
      total: 0,
      isNoData: false,
      isLoadError: false,
      error: false,
      loading: false, // 是否处于加载状态
      finished: false, // 是否已加载完所有数据
      isLoading: false, // 是否处于下拉刷新状态
      finishedText: '已经到底了',
      newsType: '',
      bt: 'xw',
      pageSize: 4,
      souMold: '',
      classLabel: ''
    }
  },
  computed: {
    isShowModuleName() {
      return this.option.isShowModuleName
    },
    // 模块名称
    moduleName() {
      return this.option.moduleName
    },
    resource() {
      return this.option.resource
    },
    imgBg() {
      return this.option.imgBg
    },
    bgcolor() {
      return this.option.bgcolor
    }
  },
  created() {
    if (this.isInitData) {
      this.pageSize = this.option.pageSize || 4
      this.souMold = this.option.souMold
      this.classLabel = this.option.classLabel
      this.initData()
    } else {
      this.list = [
        {
          id: '1',
          mainTitle: '新闻标题',
          publishTime: '2022-10-10 12:00:00',
          coverImgIdUrl: ''
        },
        {
          id: 'da9f5c22-67f3-46b6-b7c7-3d69ea754257',
          mainTitle: '新闻标题',
          publishTime: '2022-10-10 12:00:00',
          coverImgIdUrl: ''
        },
        {
          id: 'da9f5c22-67f3-46b6-b7c7-3d69ea754258',
          mainTitle: '新闻标题',
          publishTime: '2022-10-10 12:00:00',
          coverImgIdUrl: ''
        }
      ]
      this.finished = true
    }
  },

  methods: {

    /**
     * 用于initData方法调用完设置数据
     */
    setData(result) {
      this.finished = false
      if (result !== 'error') {
        const { rows, total } = result?.dataList.data || {}
        if (rows) {
          this.list.push(...rows)
        }

        this.loading = false
        this.isLoading = false
        this.isNoData = total < 1
        if (this.isNoData) {
          this.finishedText = ''
        } else {
          this.finishedText = '已经到底了'
        }
        if (this.list.length >= total) {
          this.finished = true
        } else {
          this.finished = false
        }
      }
    },
    goNewsDetail(item) {
      return
      const { classifyName } = this.tabs.find(item => {
        return item.id === this.active
      })
      this.$router.push({ path: '/newsDetail', name: 'NewsDetail', query: { bt: 'xw', i: item.id, t: classifyName }})
    },
    refresh4other() {
      return new Promise((resolve) => {
        this.finished = true
        this.page = 1
        this.list = []
        resolve()
      })
    },
    onRefresh() {
      this.finished = false
      this.page = 1
      this.list = []
      this.getDataByCode('dataList')
    },

    onLoad() {
      if (!this.isLoading) {
        this.page += 1
        this.getDataByCode('dataList')
      } else {
        this.loading = false
      }
    }

  }
}
</script>
<style lang="scss">
@import '@/styles/utility/rem.scss';

.news-list-style-three-comp {

  > div {
    position: relative;
    border-radius: rem(16);
    // background-color: #fff;

    .title-more {
      display: flex;
      justify-content: left;
      align-items: center;
      color: #333;
      font-size: rem(32);
      padding: rem(24) rem(30);

      p {
        width: 80%;
        text-align: left;
        font-weight: bold;
      }

      span {
        width: 20%;
        text-align: right;
        font-size: rem(28);
        color: #666;
        cursor: pointer;
      }
    }

    > ul {
      // background-color: #fff;

      li {
        position: relative;

        &:after {
          left: rem(20);
          right: rem(20);
          width: auto;
          height: 1px;
          position: absolute;
          z-index: 0;
          bottom: 0;
          content: '';
          background-image: -webkit-linear-gradient(
                  bottom,
                  #ececec 50%,
                  transparent 0
          );
          background-image: linear-gradient(0deg, #ececec 50%, transparent 0);
        }

        &:last-child::after {
          height: 0;
        }

      }

    }
  }

}
</style>
